<template>
    <div>
        <el-form ref="form" :model="form" @submit.prevent="onSubmit" :inline="true" style="padding:20px;width:100%;min-width:600px;" label-width="110px"  v-model="labelPosition">
            <div class="base-div">
                <!--<el-col :span="6">-->
                <el-form-item label="银行总发行库存" >
                    <label>123213123123123123</label>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="18">-->
                <el-form-item label="剩余库存">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                        <el-button type="warning" class="medium-btn">补充/扣除</el-button>
                        <el-button type="warning" class="medium-btn" @click="historyRecord('发行记录')">历史记录</el-button>
                    </div>
                </el-form-item>
                <!--</el-col>-->
            </div>
            <div class="base-div">
                <!--<el-col :span="6">-->
                <el-form-item label="充值库存">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                        <el-button type="warning" class="medium-btn">补充/扣除</el-button>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="5">-->
                <el-form-item label="玩家充值总额">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="5">-->
                <el-form-item label="玩家提现总额">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                        <el-button type="warning" class="medium-btn" @click="historyRecord('充值库存记录')">历史记录</el-button>
                    </div>
                </el-form-item>
                <!--</el-col>-->
            </div>
            <div class="base-div">
                <!--<el-col :span="6">-->
                <el-form-item label="后台充值库存">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                        <el-button type="warning" class="medium-btn">补充/扣除</el-button>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="5">-->
                <el-form-item label="后台充值总额">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                        <el-button type="warning" class="medium-btn" @click="historyRecord('后台充值库存记录')">历史记录</el-button>
                    </div>
                </el-form-item>
                <!--</el-col>-->
            </div>
            <div class="base-div">
                <!--<el-col :span="6">-->
                <el-form-item label="后台备用库存">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                        <el-button type="warning" class="medium-btn">补充/扣除</el-button>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="4">-->
                <el-form-item label="活动奖励金币">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="4">-->
                <el-form-item label="bug补偿金币">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="4">-->
                <el-form-item label="账号异常补偿">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="4">-->
                <el-form-item label="其他">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                        <el-button type="warning" class="medium-btn" @click="historyRecord('后台备用库存记录')">历史记录</el-button>
                    </div>
                </el-form-item>
                <!--</el-col>-->
            </div>
            <el-form-item label="血池银行库存">
                <div class="base-flex">
                    <label>123213123123123123</label>
                </div>
            </el-form-item>
            <div class="base-div">
                <!--<el-col :span="6">-->
                <el-form-item label="玩家金币总额">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="5">-->
                <el-form-item label="银商金币总额">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
            </div>
            <div class="base-div">
                <!--<el-col :span="6">-->
                <el-form-item label="税收总收益">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="4">-->
                <el-form-item label="对战税收">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>/-->
                <!--<el-col :span="4">-->
                <el-form-item label="百人类税收">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="4">-->
                <el-form-item label="血池税收">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
                <!--<el-col :span="4">-->
                <el-form-item label="提现税收">
                    <div class="base-flex">
                        <label>123213123123123123</label>
                    </div>
                </el-form-item>
                <!--</el-col>-->
            </div>
        </el-form>
        <el-dialog :title="alertTitle" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="account" label="操作帐号"></el-table-column>
                <el-table-column property="money" label="操作金额"></el-table-column>
                <el-table-column property="time" label="时间"></el-table-column>
                <el-table-column property="ip" label="操作IP"></el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="补充/扣除" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="补充">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="扣除">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>

<script>
	import ElFormItem from "element-ui/packages/form/src/form-item";

    export default {
        components: {ElFormItem},
        data() {
			return {
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
                labelPosition:'left',
                alertTitle:'',
                gridData: [
                    {
                    time: '2016-05-02',
                    account: '王小虎',
                    money: '1300.00',
                    ip:'155.15.245.35'
                }, {
                    time: '2016-05-02',
                    account: '王小虎',
                    money: '1300.00',
                    ip:'155.15.245.35'
                }, {
                    time: '2016-05-02',
                    account: '王小虎',
                    money: '1300.00',
                    ip:'155.15.245.35'
                }, {
                    time: '2016-05-02',
                    account: '王小虎',
                    money: '1300.00',
                    ip:'155.15.245.35'
                }
                ],
                dialogTableVisible:false,
                dialogFormVisible:false
			}
		},
		methods: {
            historyRecord(title){
			    this.alertTitle = title
                this.dialogTableVisible = true
            }
		}
	}

</script>
